<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title21</title>
    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}">
    <script th:src="@{/plugins/layui/layui.js}"></script>
    <script th:src="@{/plugins/jquery/jquery.min.js}"></script>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <div style="overflow: auto">
            <ul id="leftTree" class="dtree">
                <li>12</li>
                <li>13</li>
                <li>14</li>
            </ul>
        </div>
    </div>
</div>
<script>

    let treeData = null;
    layui.use(['form', 'table', 'tree'], function () {
        var contextPath = '[[${#servletContext.contextPath}]]';
        let MODULE_PATH = contextPath + "/article/class/";

        let form = layui.form;
        let table = layui.table;
        let tree = layui.tree;

        // tree.render({
        //     elem: '#leftTree'
        //     //绑定数据源
        //     ,url: MODULE_PATH + 'selectParent'
        // });

        // var original = { name: 'John', age: 25 };
        //
        // var copy = { ...original };
        //
        // var copy1 = original;
        //
        // copy.age = 28;
        //
        // console.log(original.age);  // 输出: 25
        // console.log(copy.age);     // 输出: 28
        // console.log(copy1.age);     // 输出: 25
        //
        // copy1.age = 30;
        // console.log(original.age);  // 输出: 30
        // console.log(copy.age);     // 输出: 28
        // console.log(copy1.age);     // 输出: 30

        let firstTree = 0;
        loadChildNodes(0);

        function loopFindTreeObj(_parentId, childtreeData, childtreeDataAppend) {
            if (childtreeData == null) return;
            //let tmp = [ ...childtreeDataAppend ];
            if (childtreeData.children != null && childtreeData.children.length > 0) {
                loopFindTreeObj(_parentId, childtreeData.children, childtreeDataAppend);
            } else {
                if (childtreeData.id == _parentId) {
                    childtreeData.spread = true;
                    childtreeData.children = childtreeDataAppend;
                }
            }
        }

        //递归找到当前数据节点所属的父节点,在此赋值并展开这个节点
        function updateNodeData(data, nodeId, newData) {
            for (let i = 0; i < data.length; i++) {
                if (data[i].id === nodeId) {
                    data[i].spread = true;
                    data[i].children = newData;
                    return;
                }
                if (data[i].children && data[i].children.length > 0) {
                    updateNodeData(data[i].children, nodeId, newData);
                }
            }
        }

        function loadChildNodes(_parentId, _parentObj) {
            // 发起异步请求获取子节点数据，这里使用 jQuery 的 AJAX 方法示例
            $.ajax({
                url: MODULE_PATH + 'selectParent',
                // data: JSON.stringify({ parentId: parentId  }),
                data: {parentId: _parentId},
                dataType: 'json',
                type: 'post',
                //contentType: 'application/json',
                success: function (dataInfo) {
                    if (dataInfo != null && dataInfo.status.code == 200) {
                        //一般首次进来没有数据,所以需要初始化一下树控件
                        if (treeData == null) {
                            treeData = dataInfo.data;
                            tree.render({
                                elem: '#leftTree'
                                //绑定数据源
                                , data: treeData// dataInfo.data
                                , showCheckbox: false  //是否显示复选框
                                //, edit: false //是否开启节点的右侧操作图标
                                , id: 'tree1'
                                , isJump: true //是否允许点击节点时弹出新窗口跳转
                                //, showLine: false
                                // , where: {
                                //     param1: 'value1', // 额外的参数
                                //     param2: 'value2'
                                // }
                                , click: function (obj) {
                                    //treeData = obj.data;
                                    console.log('click....')
                                    console.log(obj); // 得到当前点击的节点数据
                                    console.log(obj.data); // 得到当前点击的节点数据
                                    console.log(obj.state); // 得到当前节点的展开状态：open、close、normal
                                    console.log(obj.elem); // 得到当前节点元素

                                    console.log(obj.data.children); // 当前节点下是否有子节点
                                    //if ((obj.data.children == null || obj.data.children.length === 0)) {
                                    if(obj.state == "open" && obj.data.children.length <= 0 && obj.data.existChildren == true){
                                        //loadChildNodes(obj.data.id,dataInfo.data);
                                        loadChildNodes(obj.data.id, obj);
                                    }
                                }
                                // ,oncheck: function(obj){
                                //     console.log('oncheck....')
                                //     console.log(obj.data); // 得到当前点击的节点数据
                                //     console.log(obj.checked); // 节点是否被选中
                                //     console.log(obj.elem); // 得到当前节点元素
                                // }
                                // ,operate: function(obj){
                                //     console.log('operate....')
                                //     var type = obj.type; // 得到操作类型：add、edit、del
                                //     var data = obj.data; // 得到当前节点的数据
                                //     var elem = obj.elem; // 得到当前节点元素
                                //
                                //     // Ajax 操作
                                //     var id = data.id; // 得到节点索引
                                //     if(type === 'add'){ // 增加节点
                                //         //返回 key 值
                                //         return 123;
                                //     } else if(type === 'update'){ // 修改节点
                                //         console.log(elem.find('.layui-tree-txt').html()); // 得到修改后的内容
                                //     } else if(type === 'del'){ // 删除节点
                                //         // …
                                //     };
                                // }
                            });
                        } else {
                            updateNodeData(treeData,_parentId, dataInfo.data);
                            // for (let i = 0;i < treeData.length;i++) {
                            //     loopFindTreeObj(_parentId, treeData[i], dataInfo.data);
                            // }
                            //for (let i =0;i < )
                            // treeData[2].children = dataInfo.data;
                            // treeData[2].spread = true;

                           //let copy = Object.assign({}, dataInfo.data);
                            //let copy = JSON.parse(JSON.stringify(dataInfo.data));
                            //let copy = [...dataInfo.data];

                            // _parentObj.data.spread = true;
                            // _parentObj.data.children = dataInfo.data;
                            //_parentObj.data.children = { ...dataInfo.data };
                            //_parentObj.data.children=copy;

                            // 更新 treeData 的值并重新渲染树组件
                            // treeData = treeData.map(function(node) {
                            //     if (node.id === _parentObj.data.id) {
                            //         return _parentObj.data;
                            //     } else {
                            //         return node;
                            //     }
                            // });

                            tree.reload('tree1', {data:treeData});
                        }


                        //if (firstTree > 0) {
                            // 将子节点数据动态追加到当前节点
                            // for (var i = 0; i < dataInfo.data.length; i++) {
                            //     _parentData.children.push(dataInfo.data[i]);
                            // }
                            // _parentObj.data.spread = true;
                            // _parentObj.data.children = dataInfo.data;

                            // let pushData = [];
                            // pushData.push(_parentData);
                            //_parentData[1].spread = true;
                            //_parentData[1].children = dataInfo.data;
                            // 将子节点数据动态绑定到当前节点
                            // tree.reload('tree1', {
                            //     data: treeData
                                //data: pushData
                                //data: _parentData//dataInfo.data
                                //,parentId:'tree1'
                            //});
                        //} else {
                        //    firstTree++;

                        //}
                    } else {
                        console.log(dataInfo.status.message)
                    }
                    // 将返回的子节点数据绑定到父节点
                    // tree.reload('treeContainer', {
                    //     data: data,
                    //     parentKey: 'parentId',
                    //     done: function() {
                    //         // 绑定完成后，展开父节点
                    //         dTree.setAxisExpand('treeContainer', parentId);
                    //     }
                    // });
                },
                error: function () {
                    // 处理请求错误的情况
                }
            });
        }

    });
</script>
</body>
</html>